<template>
  <div class="page">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="nav-height-box"></div>
    <div class="nav-footer">
      <footer>
        <van-tabbar route>
          <van-tabbar-item
            v-for="(item, index) in navList"
            replace
            :to="item.path"
            :key="index"
            :name="item.name"
            :icon="item.icon"
            >{{ item.value }}</van-tabbar-item
          >
        </van-tabbar>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navList: [
        {
          'path': '/bookshelf',
          'name': 'bookshelf',
          'icon': 'bar-chart-o',
          'value': '书架'
        },
        {
          'path': '/store',
          'name': 'store',
          'icon': 'goods-collect-o',
          'value': '书城'
        },
        {
          'path': '/member',
          'name': 'member',
          'icon': 'diamond-o',
          'value': '会员'
        },
        {
          'path': '/account',
          'name': 'account',
          'icon': 'contact',
          'value': '账户'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.nav-height-box {
  height: 50px;
  width: 100%;
  background-color: white;
}
</style>
